<template>
	<view class="content">
		<view class="top_area">
			<view class="u-font-40 u-margin-bottom-20">{{title}}</view>
			<view class="u-font-13 u-margin-bottom-20">{{des}} </view>
		<!-- 	<view>简介....</view> -->
			<u-line color="#f4f4f5"></u-line>

		</view>
		<view class="count_area">
			<u-row gutter="16" justify="space-between">
				<u-col span="4" class="count_area_item">
					<view class="count_area_itme_count">{{stat.total||0}}</view>
					<view class="count_area_itme_des">累计次数</view>
				</u-col>
				<u-col span="4" >
					<view class="count_area_itme_count">{{stat.unaudited||0}}</view>
					<view class="count_area_itme_des">未审核</view>
				</u-col>
				<u-col span="4">
					<view class="count_area_itme_count">{{stat.audited||0}}</view>
					<view class="count_area_itme_des">已审核</view>
				</u-col>
			</u-row>
		</view>
		<view class="u-padding-20 info_list">
			<view class="info_list_title">上报列表</view>
			<view class="info_box"  @tap="toDetail(item.id)" v-for="(item,index) in recordList ">
				<view class="info_box_title">
					<u-row gutter="16" >
							<u-col span="8">
								<view class="info_box_title_time">
									上报时间：{{$u.timeFormat(item.createTime, 'yyyy-mm-dd')}}
								</view>
							</u-col>
							<u-col span="4">
								<view class="info_box_title_status" v-if="item.auditStatus!=1">
									{{item.auditStatus|statusFormat}}
								</view>
								<view class="info_box_title_status" style="color: #4CD964;" v-if="item.auditStatus==1">
									{{item.auditStatus|statusFormat}}
								</view>
							</u-col>
					</u-row>
				</view>
				<view class="info_box_content">
					<view class="info_box_content_item"><text class="line_lable">记录标题：</text>{{item.title}}</view>
					<view class="info_box_content_item"><text class="line_lable">时间：</text>{{$u.timeFormat(item.recordDate, 'yyyy年mm月dd日')}}</view>
					<view class="info_box_content_item"><text class="line_lable">地点：</text>{{item.provinceName+item.cityName+item.countyName}}</view>
					<view class="info_box_content_item"><text class="line_lable" style="overflow: hidden;">日志内容：</text><view style="overflow: hidden;">{{item.record==null?'':item.record}}</view></view>
					<view class="info_box_content_item" v-if="checkJson(item.content)" v-for="(o,i) in jsonFormat(item.content)"><text class="line_lable">{{i}}：</text>{{o}}</view>
					
					<view style="margin-bottom: 70rpx;" v-if="item.attachment!=''">
					
						<image class="info_box_content_image" v-if="imgt.uploadFile"  v-for="imgt in JSON.parse(item.attachment)" :src="baseUrl+imgt.uploadFile"></image>
						
					</view>
				<!-- 	<view>
						<image class="info_box_content_image" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gzcys.com.cn%2Fxxgk_47795%2Fkypt%2F201908%2FW020190828620760554319.jpg&refer=http%3A%2F%2Fwww.gzcys.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613399348&t=f54153d2bfc03c11d440202d8f2c2119"></image>
					</view> -->
					<view class="trash" v-if="item.auditStatus!=1" @click="delRecord(item.id)">
						<u-icon name="trash" style="color:red;font-size: 35rpx;"></u-icon>
					</view>
					<view class="edit" v-if="item.auditStatus!=1" @click="editRecord(item.id)">
						<u-icon name="edit-pen" style="color:blue;font-size: 35rpx;"></u-icon>
					</view>
				
				</view>
			</view>
			
			
		</view>
		<view style="height: 50rpx;"></view>
		<view class="add_btn">
			<u-row gutter="16">
					<u-col span="6" style="padding: 0;background-color: #2979ff;">
						<view style="padding: 0;background-color: #2979ff;margin: 0;">
							<u-button type="primary" style="width:100%" @click="upData()">
								<u-icon name="plus" size=35 style="margin-top: -6rpx;margin-right: 10rpx;"></u-icon>
								新上报
							</u-button>
						</view>
					</u-col>
					
					<u-col span="6" style="padding: 0;background-color: #ff9900;" >
						<view style="padding: 0;background-color: #ff9900;margin: 0;">
							<u-button type="warning" style="width:100%" @click="toSelect()">
								<u-icon name="search" size=35 style="margin-top: -6rpx;margin-right: 10rpx;"></u-icon>
								从工作日志选择
							</u-button>
						</view>
					</u-col>
			</u-row>
		</view>

	</view>
</template>

<script>
	import request from '../../util/request.js'
	import api from '../../util/api.js'
	import check from '../../util/check.js'
	export default {
		data() {
			return {
				id:'',
				title:'',
				des:'',
				recordList:[],
				userInfo:null,
				stat:'',
				isLoadMore:true,
				page:1,
				pageSize:10,
				baseUrl:'https://kjtpy.sdast.org/userfiles',
				stat:'',
				stat2:{
					total:0,
					unaudited:0,
					audited:0
				}
				
			}
		},
		filters: {
			statusFormat: function(value) {
				if(value==1){
					return "已审核";
				}else{
					return "未审核"
				}
			},
			timeFormat:function(value){
				return check.dateFormat(value);
				
			},
			
		},
		onShow() {
			this.getItems();
			this.getStat();
			
		},
		onLoad(options) {
			
			this.title=options.title;
			this.id=options.id;
			this.userInfo=check.checkLogin();
			
		},
		onPullDownRefresh() {
			
		
			this.getItems()
		},
		onReachBottom(){  //上拉触底函数
			  if(this.isLoadMore){  //此处判断，上锁，防止重复请求
					
					this.isLoadMore=true
					this.page+=1
					this.getItems()
			  }else{
				  uni.showToast({
					icon:'none',
				  	title:"没有更多记录了"
				  })
			  }
		},
		methods: {
			getStat:function(){
				request.post(api.statRecord,{
					itemId:this.id,
					userId:this.userInfo.uid,			
				}).then(response=>{
					
					if(response.data.data!=null){
						this.stat=response.data.data;
					}else{
						this.stat=this.stat2
					}
					uni.hideLoading();
					
				}).catch(ex=>{
					
					uni.showToast({
						icon:'none',
						title:'请求失败，请稍后再试',
						
					})
				})
			},
			getItems:function(){
				uni.showLoading({
					title:'数据加载中...'
				})
				request.post(api.recordList,{
					itemId:this.id,
					userId:this.userInfo.uid,
					page:this.page,
					pageSize:this.pageSize
								
				}).then(response=>{
				
					if(response.data.data!=null){
					   
						console.log(response);
						console.log(this.page);
						if(this.page==1){
							console.log(response.data.data);
							if(response.data.data==true){
								this.recordList=[];
								
							}else{
								this.recordList=response.data.data.records;
							}
						}else{
							var list=this.recordList.concat(response.data.data.records);
							this.recordList=list;	
						}
						if(this.recordList.length>=response.data.data.total){
							this.isLoadMore=false;
						}
						
					}else{
						this.recordList=[];
					}
					uni.hideLoading();
					
				}).catch(ex=>{
					
					uni.showToast({
						icon:'none',
						title:'请求失败，请稍后再试',
						
					})
				})
			},
			delRecord(id){
				var that=this;
				uni.showModal({
					title:'确定要删除吗',
					success: function (res) {
					        if (res.confirm) {
					            request.post(api.recordDel,{
					            	id:id,
					            	userId:that.userInfo.uid,			
					            }).then(response=>{
					            	console.log(response);
					            	if(response.data.data!=null){
										that.getStat();
										
										uni.showToast({
											icon:'none',
											title:'删除成功',
											
										})
					            		that.page=1;
					            		that.getItems();
					            	}
					            	
					            }).catch(ex=>{
					            	console.log(ex);
					            	uni.showToast({
					            		icon:'none',
					            		title:'请求失败，请稍后再试',
					            		
					            	})
					            })
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }

				})
				
				
			},
			editRecord(id){
				uni.navigateTo({
					url:'../detail/detail?id='+id+"&itemId="+this.id,
				})
			},
			jsonFormat:function(value){
				if(check.isJSON(value)){
					let json=JSON.parse(value);
					console.log(json);
					return json;
					this.isJSON=true;
				}else{
					this.isJSON=false;
					return value;
				}
				
			},
			checkJson(value){
				return check.isJSON(value);
			},
			upData:function(){
				uni.navigateTo({
					url:'../form/form?id='+this.id
				})
			},
			toSelect:function(id){
				uni.navigateTo({
					url:'../log/log?itemId='+this.id
				})
			},
			image_format:function(value){
				value=value.replace("height=","h=");
				 var regex = new RegExp('<img', 'gi');
				 value= value.replace(regex, `<img style="max-width: 100% !important;; height:300rpx !important;"`);
				 return value;
				
			},
			formatAttachment(val){
				var images= (val||'').split(",");
				
				
			},
			toDetail:function(id){
				// uni.navigateTo({
				// 	url:'../detail/detail?id='+id
				// })
			}

		}
	}
</script>

<style>
	.content {
		background-color:#f2f3f6;
	}
	.richt{
		
	}
	.top_area{
		background-color: #FFFFFF;
		padding: 30rpx;
	}
	.count_area{
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-top: 0px;
	}
	.line_lable{
		font-weight: bold;
	}
	.count_area_item{
		text-align: center;
	}
	.edit{
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #F8F8F8;
		padding-top: 10rpx;
		text-align: center;
		float: right;
		margin-top: -50rpx;
		margin-right: 30rpx;
		
	}
	.trash{
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #F8F8F8;
		padding-top: 10rpx;
		text-align: center;
		float: right;
		margin-top: -50rpx;
		
	}
	.count_area_itme_count{
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		margin-bottom: 10rpx;
		
	}
	.count_area_itme_des{
		text-align: center;
		font-size: 20rpx;
		color: #c8c9cc;
		
	}
	.info_box{
		background-color: #FFFFFF;
		padding:10rpx;
		border: solid 1px #f4f4f5;
		margin-bottom: 20rpx;
		border-radius: 5rpx;
	}
	.info_box_title{
		border-bottom: solid 1px #f4f4f5;
		height: 65rpx;
		line-height: 60rpx;
	}
	.info_box_title_time{
		
		
	}
	.info_box_title_status{
		text-align: right;
		color: red;
	}
	.info_list_title{
		border-left: solid 10rpx #0095f0;
		padding: 0 10rpx;
		margin: 20rpx 0;
		font-size: 35rpx;
		font-weight: 500;
	}
	.info_list{
		
	}
	.info_box_content{
		padding: 20rpx;
	}
	.info_box_content_item{
		padding: 10rpx 0;
	}
	.info_box_content_image{
		width: 300rpx;
		height: 200rpx;
		margin-right: 10rpx;
	}
	.add_btn{
/* 		background-color: #2979ff;
 */		padding: 0;
		bottom: var(--window-bottom);
		position:fixed;
		width: 100%;
		float: left;
		border-radius: 0 0 10rpx 10rpx;
	}
		
</style>
